<div class="row">
  <div class="col-sm-6">
    <div class="panel panel-default">
      <div class="panel-heading" translate="home.detailPane.badRecordsTab.badRecordsHistogram">Records in Error Histogram</div>
      <div class="panel-body">
        <nvd3-multi-bar-horizontal-chart
          data="errorRecordsPercentilesData"
          id="errorRecordsPercentilesDataID"
          height="250"
          color="getColor()"
          legendColor="getColor()"
          showLegend="true"
          showXAxis="true"
          showValues="true"
          margin="{left:50,top:70,bottom:20,right:20}">
          <svg></svg>
        </nvd3-multi-bar-horizontal-chart>
      </div>
    </div>
  </div>

  <div class="col-sm-6">
    <div class="panel panel-default">
      <div class="panel-heading" translate="home.detailPane.badRecordsTab.badRecordsCounts">Bad Records Count</div>
      <div class="panel-body">

        <!--  margin="{left:100,top:20,bottom:20,right:20}"-->
        <nvd3-discrete-bar-chart
          data="badRecordsChartData"
          id="BadRecordsBarChartID"
          height="250"
          showXAxis="true"
          showYAxis="true"
          showValues="true"
          showLegend="true"
          staggerLabels="true"
          tooltips="true"
          yAxisTickFormat="getYAxisLabel()"
          valueformat="valueFormatFunction()"
          margin="{left:30,top:20,bottom:50,right:20}">
        </nvd3-discrete-bar-chart>

      </div>
    </div>
  </div>

</div>

<div class="row">

  <div class="col-sm-6">
    <div class="panel panel-default">
      <div class="panel-heading" translate="home.detailPane.badRecordsTab.errorsHistogram">Errors Histogram</div>
      <div class="panel-body">
        <nvd3-multi-bar-horizontal-chart
          data="errorsPercentilesData"
          id="errorsPercentilesDataID"
          height="250"
          color="getColor()"
          legendColor="getColor()"
          showLegend="true"
          showXAxis="true"
          showValues="true"
          margin="{left:50,top:70,bottom:20,right:20}">
          <svg></svg>
        </nvd3-multi-bar-horizontal-chart>
      </div>
    </div>
  </div>

  <div class="col-sm-6">
    <div class="panel panel-default">
      <div class="panel-heading" translate="home.detailPane.badRecordsTab.errorsCount">Errors</div>
      <div class="panel-body">
        <nvd3-discrete-bar-chart
          data="errorMessagesChartData"
          id="ErrorMessagesBarChartID"
          height="250"
          showXAxis="true"
          showYAxis="true"
          showValues="true"
          showLegend="true"
          tooltips="true"
          staggerLabels="true"
          yAxisTickFormat="getYAxisLabel()"
          valueformat="valueFormatFunction()"
          margin="{left:30,top:20,bottom:50,right:20}">
        </nvd3-discrete-bar-chart>
      </div>
    </div>
  </div>
</div>